<template>
  <div class="intro-introdu-page">
    <div class="intro-header">
      <el-button type="primary" @click="insertAdmin">增加个人信息</el-button>
    </div>
    <div class="intro-body">
      <el-table :data="userList" style="width: 100%">
        <el-table-column label="图像" width="100" prop="user_name">
          <template slot-scope="scope">
            <img :src="baseUrl+scope.row.avatar_url" alt="">
          </template>
        </el-table-column>
        <el-table-column label="姓名" width="100" prop="user_name">
        </el-table-column>
        <el-table-column label="生日" width="200" prop="birthday">
        </el-table-column>
        <el-table-column label="联系方式" width="200" prop="phone">
        </el-table-column>
        <el-table-column label="学位" width="200" prop="experience">
        </el-table-column>
        <el-table-column label="邮箱" width="200" prop="email">
        </el-table-column>
        <el-table-column label="地址" width="200" prop="addr">
        </el-table-column>
        <el-table-column label="创建时间" width="200" prop="user_name">
          <template slot-scope="scope">
            <span>{{scope.row.time}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="right">
          <template slot-scope="scope">
            <el-button size="mini" type="info" @click="handleEdit(scope.row)">
              编辑
            </el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog class="form-el-dialog" title="个人基础信息" :visible.sync="dialogVisible" width="60%">
      <introduction-form :dialog-visible.sync="dialogVisible" :user-item="userItem">
      </introduction-form>
    </el-dialog>

    <div>introduction -> 基本信息</div>
  </div>
</template>

<script>
import moment from 'moment';
import UserApi from '@/api/user';
import IntroductionForm from './components/IntroductionForm.vue';

export default {
  name: 'SelfIntroduction',
  components: {
    IntroductionForm,
  },
  data() {
    return {
      baseUrl: 'http://backserve.com:3000',
      userList: [],
      dialogVisible: false,
      userItem: null,
    };
  },
  mounted() {
    // 个人基础信息列表
    this.getList();
  },
  methods: {
    insertAdmin() {
      this.dialogVisible = true;
    },
    // 编辑
    handleEdit(data) {
      this.userItem = data;
      this.dialogVisible = true;
    },
    // 删除
    handleDelete(data) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          UserApi.delUser(data.id)
            .then((res) => {
              if (res.data) {
                this.$message({
                  type: 'success',
                  message: '删除成功!',
                });
                this.getList();
              } else {
                this.$message({
                  type: 'info',
                  message: '删除失败!',
                });
              }
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '删除失败!',
              });
            });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          });
        });
    },
    // 个人基础信息列表
    getList() {
      UserApi.userList()
        .then((data) => {
          if (data.data.length > 0) {
            const arr = data.data.map((item) => {
              const obj = item;
              obj.birthday = moment(item.birthday * 1000).format('YYYY-MM-DD');
              obj.time = moment(item.time * 1000).format('YYYY-MM-DD hh:mm:ss');
              return obj;
            });

            this.userList = arr;
          } else {
            this.userList = [];
          }
        })
        .catch(() => {
          this.userList = [];
        });
    },
  },
  watch: {
    dialogVisible() {
      if (!this.dialogVisible) {
        this.userItem = null;
        this.getList();
      }
    },
  },
};
</script>

<style  lang="scss" scoped>
@import "~@/styles/variables.scss";

.intro-introdu-page {
  width: 100%;
  padding: 15px;
  position: relative;
  .intro-header {
     padding:10px 10px;
    margin-bottom: 10px;
    background-color: #ffffff;
  }
  .intro-body {
     padding:10px 10px;
    margin-bottom: 10px;
    background-color: #ffffff;
    img {
      width: 50px;
      height: 50px;
    }
  }
  .form-el-dialog {
    /deep/ .el-dialog__header {
      border-bottom: 1px solid #ccc;
    }
  }
}
</style>
